<template>
	<view class="order-list p-tb-30">
		<view class="item br-10 m-lr-30 m-b-30 p-30 p-t bc-w" v-for="item in itemList">
			<view class="flex">
				<view class="">
					订单号：2025011054534810
				</view>
				<view class="m-l-auto tb orderStatus">
					已支付
				</view>
			</view>
			<view class="item-list m-t-30">
				<view class="item-list p-tb-30">
					<view class="l ovh br-10">
						<image src="https://www.tennoir.ltd/assets/addons/xyvenue/imgs/logo.png" mode=""></image>
					</view>
					<view class="r psr m-l-20">
						<view class="tb lh-40 m-t-10">
							跃测Pro版
						</view>
						<view class="venue m-t-10">

						</view>
						<view class="date m-t-40 ts-26">
							<text>下单时间：</text>
							<text>2025-01-10 16:30-18:00</text>
						</view>
						<view class="price-box flex psa lh-32 m-t-10">
							<text>定金￥</text>
							<text>2000元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom flex p-20 m-t-30">
				<view class="">
					合计：¥9.00
				</view>
				<view class="m-l-auto lh-30 flex" @tap="$xyfun.to('/pages/user/franOrder/detail')">
					订单详情
					<text class="xyicon icon-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			itemList: {
				type: Array,
				default: () => []
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.flex {
		display: flex;
		flex-wrap: wrap;
	}

	.orderStatus {
		color: #65c61d;
	}

	.item-list {
		border-color: #f7f7f7;
		display: flex;

		.l {
			width: 150rpx;
			height: 150rpx;

			image {
				vertical-align: middle;
				width: 150rpx;
				height: 150rpx;
			}
		}

		.psr {
			position: relative;
			width: 460rpx;

			.date {
				color: #808080;
			}

			.price-box {
				font-weight: bold;
				position: absolute;
				right: 0;
				top: 0;

				text {
					color: #ff5335;
				}
			}
		}
	}

	.bottom {
		color: #808080;
		background-color: #f7f7f7;
		align-items: center;

		.m-l-auto {
			color: #65c61d;
		}
	}
</style>